<template>
  <!--pc-->
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="false">
      <template #add>
        <div class="opt-item">
          <el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加百度接口
          </el-button>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
        <el-table-column prop="id" label="id" width="100">
        </el-table-column>
        <el-table-column prop="name" label="应用名" width="180">
        </el-table-column>
        <el-table-column prop="app_id" label="app_id">
        </el-table-column>
        <el-table-column prop="api_key" label="api_key">
        </el-table-column>
        <el-table-column prop="secret_key" label="secret_key">
        </el-table-column>
        <el-table-column prop="type" label="应用类型" width="100px">
          <template #default="scope">
            <span>{{ scope.row.type == "face" ? "人脸" : "文字" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="onEditData(scope.row)" type="success" plain size="mini">编辑</el-button>
            <el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>

    <!-- 添加百度接口 -->
    <compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
      <el-form ref="form" :model="form" label-width="120px">
        <el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
                      element-loading-spinner="el-icon-loading">
          <div class="form-flex">
            <el-form-item label="应用名" prop="name">
              <el-input class="w-ipt" v-model="form.name" placeholder="请输入应用名"></el-input>
            </el-form-item>
            <el-form-item label="AppId" prop="app_id">
              <el-input class="w-ipt" v-model="form.app_id" placeholder="请输入AppId"></el-input>
            </el-form-item>
            <el-form-item label="ApiKey" prop="api_key">
              <el-input class="w-ipt" v-model="form.api_key" placeholder="请输入ApiKey"></el-input>
            </el-form-item>
            <el-form-item label="SectetKey" prop="secret_key">
              <el-input class="w-ipt" v-model="form.secret_key" placeholder="请输入SectetKey">
              </el-input>
            </el-form-item>
            <el-form-item label="应用类型" prop="type">
              <el-select class="w-ipt" v-model="form.type" placeholder="请选择应用类型">
                <el-option v-for="(item,index) in baidu_aip_type_List" :key="index" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-scrollbar>
        <submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
        </submit-reset>
      </el-form>
    </compoment-drawer>

    <!-- 删除数据确认 -->
    <delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
      <el-descriptions class="margin-top" :column="1" size="medium" border>
        <el-descriptions-item>
          <template #label>
            id
          </template>
          {{ delData.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            应用名
          </template>
          {{ delData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            AppId
          </template>
          {{ delData.app_id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            ApiKEY
          </template>
          {{ delData.app_id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            SectetKey
          </template>
          {{ delData.secret_key }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            应用类型
          </template>
          {{ delData.type == "face" ? "人脸" : "文字" }}
        </el-descriptions-item>
      </el-descriptions>
    </delete-data>
  </div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="id" width="100">
        </el-table-column>
        <el-table-column prop="name" label="应用名" width="180">
        </el-table-column>
        <el-table-column prop="app_id" label="app_id">
        </el-table-column>
        <el-table-column prop="api_key" label="api_key">
        </el-table-column>
        <el-table-column prop="secret_key" label="secret_key">
        </el-table-column>
        <el-table-column prop="type" label="应用类型" width="100px">
          <template #default="scope">
            <span>{{ scope.row.type == "face" ? "人脸" : "文字" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'

export default {
  name: 'baiduaip',
  mixins: [mixin],
  data() {
    return {
      // 表单
      drawer_name: '添加百度接口',
      form_loading: false, // 表单填写时加载
      form: {
        name: '',
        app_id: '',
        api_key: '',
        secret_key: '',
        type: 'face'
      },
      baidu_aip_type_List: [{
        label: '人脸',
        value: 'face'
      }, {
        label: '文字',
        value: 'ocr'
      }]
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {}
        self.addPageInfo(params)
        let res = await API.aips(params.pageNumber, params.pageSize)
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },
    // 编辑数据
    onEditData(row) {
      let self = this;
      self.drawer_form = true;
      self.form = {
        id: row.id,
        name: row.name,
        app_id: row.app_id,
        api_key: row.api_key,
        secret_key: row.secret_key,
        type: row.type
      }
    },
    // 确定删除数据
    submitDeleteData(val) {
      let self = this;
      API.delAip(val).then(res => {
        console.log(res)
        self.getData();
        self.delSuccess();
      }).catch(err => {
        self.$message.error(err.response.data.message)
      })
    },
    // 提交表单
    getNewForm() {
      let self = this;
      self.form_loading = true;
      API.aip(self.form).then(res => {
        console.log(res)
        self.submitSuccess();
        self.drawer_form = false;
        self.form_loading = false;
        self.getData();
        self.initForm();
      }).catch(err => {
        self.form_loading = false;
        self.$message.error(err.response.data.message);
      });
    },
    // 初始表单
    initForm() {
      let self = this;
      self.form = {
        name: '',
        app_id: '',
        api_key: '',
        secret_key: '',
        type: 'face'
      }
    },
  }
}
</script>